<extend name="Layout/base" />
<block name="css">
	<style>
		.el-main {
			padding: 20px;
			border: 1px solid #ccc;
		}
		.mainbox {
			min-height: 100%;
			border: 1px solid #ccc;
			padding: 20px;
			background: #fff;
		}
		.logoimg {
			display: flex;
			align-items: center;
			margin-top: 20px;
		}
		.logoimg .title {
			margin-right: 10px;
		}
		.avatar-uploader .el-upload {
			border: 1px dashed #d9d9d9;
			border-radius: 6px;
			cursor: pointer;
			position: relative;
			overflow: hidden;
		}
		.avatar-uploader .el-upload:hover {
			border-color: #409EFF;
		}
		.avatar-uploader-icon {
			font-size: 28px;
			color: #8c939d;
			width: 120px;
			height: 120px;
			line-height: 120px;
			text-align: center;
		}
		.avatar {
			width: 120px;
			height: 120px;
			display: block;
		}
		.el-form {
			width: 50%;
			margin-top: 20px;
		}
		.el-form-item__content {
			display: flex;
			align-items: center;
		}
		.el-form-item__label {
			text-align: left;
			padding: 0;
		}
		.el-input{
			width: 48%;
		}
		.change {
			border: 1px solid #333;
			height: 30px;
			line-height: 30px;
			width: 60px;
			text-align: center;
			border-radius:4px;
			margin-left:20px;
		}
		.el-form .el-button {
			margin-left: 20px;
		}
		/*.el-dialog {
            width: 34%;
            background: #19436f;
        }
        .el-dialog .el-input {
            width: 100%;
        }
        .dialogbtn {
            text-align: center;
            margin-top: 20px;
        }
        .el-dialog__header {
            border-bottom: 1px solid #CCC;
        }
        .el-dialog__title {
            color: #fff;
        }
        .el-dialog .el-button {
            width: 120px;
        }
        .el-dialog .el-input {
            margin-top: 20px;
        }*/
		.newphone {
			display: flex;
			align-items: flex-end;
		}
		.getcode {
			width: 40%;
			height: 40px;
			color: #fff;
			line-height: 40px;
			border-radius: 8px;
			text-align: center;
			margin-left: 30px;
			background: #ccc;
		}
	</style>
</block>
<block name="content">
	<div class="mainbox">
		<div class="title">登录信息 </div>
		<div class="logoimg">
			<div class="title">用户头像：</div>
			<div class="upload">
				<el-upload class="avatar-uploader" :data="uploadParam" :action="uploadUrl" :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
					<img v-if="avatarParam.imageUrl" :src="avatarParam.imageUrl" class="avatar">
					<i v-else class="el-icon-plus avatar-uploader-icon"></i>
				</el-upload>
			</div>
		</div>
		<el-form ref="user" :model="user" label-width="80px">
			<el-form-item label="用户昵称：">
				<el-input v-model="user.nickname" placeholder=""></el-input>
				<el-button type="primary" @click="changeNickName">修改</el-button>
			</el-form-item>
			<!--<el-form-item label="登录手机：">-->
				<!--<el-input v-model="user.mobile" placeholder=""></el-input>-->
				<!--<el-button type="primary" @click="changephone = true">修改</el-button>-->
			<!--</el-form-item>-->
			<el-form-item label="登录密码：">
				<el-button type="primary" @click="changepassword = true">修改</el-button>
			</el-form-item>
		</el-form>
	</div>
	<el-dialog title="修改用户昵称" :visible.sync="changenick">
		<el-input placeholder="请输入新的用户昵称" v-model="nickname"></el-input>
		<div class="dialogbtn">
			<el-button type="primary" size="medium">确定</el-button>
			<el-button @click="changenick =false">取消</el-button>
		</div>
	</el-dialog>
	<el-dialog title="修改登录手机" :visible.sync="changephone">
		<el-input placeholder="请输入新的手机号码" v-model="newphone"></el-input>
		<div class="newphone"><el-input placeholder="请输入验证码"></el-input><div class="getcode">获取验证码</div></div>
		<el-input placeholder="请输入密码" show-password></el-input>
		<div class="dialogbtn">
			<el-button type="primary" size="medium" @click="changePhone">确定</el-button>
			<el-button @click="changephone=false">取消</el-button>
		</div>
	</el-dialog>
	<el-dialog title="修改登录密码" :visible.sync="changepassword">
		<!--<div class="newphone">-->
			<!--<el-input placeholder="请输入验证码"></el-input>-->
			<!--<div class="getcode">获取验证码</div>-->
		<!--</div>-->
		<el-input placeholder="请输入新密码" v-model="passwordParam.password" show-password></el-input>
		<el-input placeholder="请确认新密码" v-model="passwordParam.repassword" show-password></el-input>
		<div class="dialogbtn">
			<el-button type="primary" size="medium" @click="changePassword">确定</el-button>
			<el-button @click="changepassword=false">取消</el-button>
		</div>
	</el-dialog>
</block>
<block name="js">
	<script>
        new Vue({
            el: '#app',
            data: function() {
                return {
                    changenick: false,
                    nickname: "",
                    changephone: false,
                    newphone: "",
                    changepassword: false,
                    newpassword: "",
                    repassword: "",
                    form: {
                        username: "",
                    },

					user:{
						id: '',
						nickname: '',
						avatar: ''
					},
					// 修改头像
                    uploadParam:{
                        type: '',
						size: ''
					},
                    uploadUrl: HOME_URL + "/Admin/File/upload",
                    avatarParam:{
                        imageUrl: '',
					},
					// 修改昵称
					nicknameParam:{},
					// 修改密码
                    passwordParam:{}
                }
            },
			created: function () {
				this.getUser();

            },
            methods: {
                getUser: function () {
                    var _this = this;
                    $.post(HOME_URL + "/orderAdmin/Admin/getUserInfo", {}, function (data) {
                        if(data.status){
							_this.user = data.data;
                            if(_this.user.avatar){
                                _this.avatarParam.imageUrl = HOME_URL + '/' + _this.user.avatar;
                            }
                        }else{
                            _this.$message.error('获取用户信息失败');
                        }
                    }, 'json');
                },
                // 上传头像
                handleAvatarSuccess(res, file) {
                    var _this = this;
                    this.avatarParam.id = this.user.id;
                    this.avatarParam.avatar = file.response.data.filepath;
                    this.avatarParam.imageUrl = URL.createObjectURL(file.raw);
					$.post(HOME_URL + "/orderAdmin/Admin/edit", _this.avatarParam, function (data) {
						if(data.status){
                            _this.$message({
                                type: 'success',
                                message: '修改头像成功'
                            });
                            app.getUser();
						}else{
                            _this.$message.error(data.msg);
						}
                    }, 'json');
                },
                beforeAvatarUpload(file) {
                    const isJPG = file.type === 'image/jpeg' || 'image/png';
                    const isLt5M = file.size / 1024 / 1024 < 5;
                    if (!isJPG) {
                        this.$message.error('上传头像图片只能是 JPG 格式!');
                    }
                    if (!isLt5M) {
                        this.$message.error('上传头像图片大小不能超过 5MB!');
                    }
                    this.uploadParam.type = file.name.split('.')[1];
                    this.uploadParam.size = file.size;
                    return isJPG && isLt5M;
                },
				// 修改昵称
                changeNickName() {
                    var _this = this;
                    this.nicknameParam.id = this.user.id;
                    this.nicknameParam.nickname = this.user.nickname;
                    $.post(HOME_URL + "/orderAdmin/Admin/edit", _this.nicknameParam, function (data) {
                        if(data.status){
                            _this.$message({
                                type: 'success',
                                message: '修改昵称成功'
                            });
                            app.getUser();
                        }else{
                            _this.$message.error('修改昵称失败');
                        }
                    }, 'json');
        		},
//                changePhone() {
//                    this.form.mobile = this.newphone
//                    this.changephone = false
//                },
                changePassword() {
                    var _this = this;
                    this.passwordParam.id = this.user.id;
                    if(this.passwordParam.password != this.passwordParam.repassword){
                        this.$message.error('密码不一致');
					}
                    $.post(HOME_URL + "/orderAdmin/Admin/edit", _this.passwordParam, function (data) {
                        if(data.status){
                            _this.$message({
                                type: 'success',
                                message: '修改密码成功'
                            });
                            _this.changepassword = false;
                        }else{
                            _this.$message.error('修改密码失败');
                        }
                    }, 'json');
                }
            }
        });
	</script>
</block>